<template>
    <div class="com_box height_100">
        <div class="create_head flexbox flexcenter flexbetween">
            <img src="../../assets/img/step_icon1.svg" alt="">
        </div>
        <div class="step_box">
            <div class="market_title">营销目标</div>
            <el-radio-group :value="dataForm.market" class="marker_radio" @input="clearSeetion">
                <el-radio label="VIDEO_PROM_GOODS">
                    <img src="../../assets/img/market_icon1.svg" alt="" class="market_icon">
                    <span class="market_name">短视频/图文带货</span>
                    <span class="market_text">吸引用户直接购买商品</span>
                    <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="LIVE_PROM_GOODS">
                    <img src="../../assets/img/market_icon2.svg" alt="" class="market_icon">
                    <span class="market_name">直播带货</span>
                    <span class="market_text">吸引用户进入直播间</span>
                    <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
            </el-radio-group>
            <div class="market_title" style="margin-top:40px">推广方式</div>
            <el-radio-group :value="dataForm.extension" class="marker_radio" @input="clearSeetionExt">
                <el-radio label="SIMPLE">
                    <img src="../../assets/img/market_icon4.svg" alt="" class="market_icon">
                    <span class="market_name">极速推广</span>
                    <div class="market_text">只需设置预算、出价等关键要素即可投放,支持基础的定向人群选择</div>
                    <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
                <el-radio label="STANDARD">
                    <img src="../../assets/img/market_icon3.svg" alt="" class="market_icon">
                    <span class="market_name">专业推广</span>
                    <div class="market_text">可自定义更多投放和创意设置,支持更丰富的定向人群选择</div>
                    <img src="../../assets/img/market_checked.svg" alt="" class="market_check">
                </el-radio>
            </el-radio-group>
            <div style="margin-top:40px">
                <el-button type="primary" size="small" class="el-button-width" @click="nextOne">下一步</el-button>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    props: ["dataForm"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        nextOne() {
            this.dataForm.step = 2;
            this.dataForm.isChange = true;
            window.sessionStorage.setItem(
                "dataForm",
                JSON.stringify(this.dataForm)
            );
        },

        clearSeetion(val) {
            if (this.dataForm.isChange) {
                this.$confirm(
                    "更改营销目标后，所有结果将会被清空，是否继续？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        sessionStorage.removeItem("dataForm");
                        this.$parent.dataForm = JSON.parse(
                            JSON.stringify(this.$parent.resetForm)
                        );
                        this.$parent.dataForm.market = val;
                    })
                    .catch(() => {});
            } else {
                this.dataForm.market = val;
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(this.dataForm)
                );
            }
        },

        clearSeetionExt(val) {
            if (this.dataForm.isChange) {
                this.$confirm(
                    "更改推广方式后，所有结果将会被清空，是否继续？",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        sessionStorage.removeItem("dataForm");
                        this.$parent.dataForm = JSON.parse(
                            JSON.stringify(this.$parent.resetForm)
                        );
                        this.$parent.dataForm.extension = val;
                    })
                    .catch(() => {});
            } else {
                this.dataForm.extension = val;
                window.sessionStorage.setItem(
                    "dataForm",
                    JSON.stringify(this.dataForm)
                );
            }
        },
    },
    components: {},
};
</script>


<style scoped>
.step_box {
    padding: 20px;
}
.market_title {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
    padding-left: 12px;
    position: relative;
    line-height: 22px;
}
.market_title::after {
    content: "";
    position: absolute;
    height: 12px;
    width: 4px;
    background-color: #4475ff;
    border-radius: 5px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.market_icon {
    width: 32px;
    height: 32px;
}
.market_name {
    font-size: 14px;
    color: #17233d;
    margin-top: 4px;
    line-height: 22px;
}
.market_text {
    font-size: 14px;
    color: #616c85;
    line-height: 22px;
    margin-top: 4px;
    width: 100%;
}
.market_check {
    position: absolute;
    right: 0px;
    top: 0px;
    display: none;
}
</style>

<style>
.marker_radio .el-radio {
    margin-right: 20px;
    white-space: normal;
}
.marker_radio .el-radio__input {
    width: 0;
    height: 0;
    visibility: hidden;
}
.marker_radio .el-radio__label {
    border: 1px solid #ebebeb;
    border-radius: 2px;
    width: 300px;
    display: flex;
    padding: 16px 20px;
    flex-direction: column;
    position: relative;
}
.marker_radio .el-radio.is-checked .el-radio__label {
    border-color: #4475ff;
    background: rgba(68, 117, 255, 0.05);
}
.marker_radio .el-radio.is-checked .el-radio__label .market_check {
    display: block;
}
</style>
